<template>
  <el-dialog
    v-model="visible"
    title="历史滑坡记录"
    width="60%"
    :close-on-click-modal="false"
    :draggable="false"
    custom-class="history-dialog"
  >
    <el-table :data="records" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="local" label="地点" />
      <el-table-column prop="location" label="坐标" />
      <el-table-column prop="time" label="时间" width="180" />
      <el-table-column prop="scale" label="规模" />
      <el-table-column prop="cause" label="成因" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleDownload(scope.row)"
          >
            下载报告
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

const visible = ref(false);

const records = ref([
  { id: 1, local: "东南边坡493191监测点附近", location: "(2371787,772861)", time: "2024-07-12 15:30", scale: "小型", cause: "持续降雨" },
  { id: 2, local: "东南边坡488490监测点附近", location: "(2371217,772852)", time: "2023-09-4 15:30", scale: "小型", cause: "持续降雨" },
  { id: 3, local: "西北边坡482311监测点附近", location: "(2370450,772920)", time: "2023-7-9 08:15", scale: "较大", cause: "暴雨冲刷" },
  { id: 4, local: "北部边坡476820监测点附近", location: "(2369985,772750)", time: "2023-04-25 11:40", scale: "大型", cause: "暴雨冲刷" },
  { id: 5, local: "南部边坡495002监测点附近", location: "(2372105,772600)", time: "2023-04-18 17:20", scale: "小型", cause: "持续降雨" },
  { id: 6, local: "东部边坡490776监测点附近", location: "(2371322,772980)", time: "2022-11-02 09:55", scale: "小型", cause: "地下水渗透" },
]);

const open = () => {
  visible.value = true;
};

// 下载逻辑
const handleDownload = (row) => {
  console.log("点击下载报告:", row);
  ElMessage.info(`报告下载功能未实现（编号: ${row.id}）`);
};

defineExpose({ open });
</script>

<style scoped>
/* 用百分比固定对话框大小 */
.history-dialog {
  height: 70%;
  display: flex;
  flex-direction: column;
}
.history-dialog .el-dialog__body {
  flex: 1;
  overflow-y: auto;
}
</style>
